<template>
   <div id="Merchant">
	   <h1 style="width: 100%; height: 100px; inline-height:100px; text-align: center;"><span>全部订单查询</span></h1>
	  <!-- <el-row :gutter="100"> -->
		   
		   <el-form :inline="true" :model="formInline" class="demo-form-inline" style="inline-heigth: 100px; text-align: center; margin: auto;">
			<el-form-item  label="订单编号:">
		<el-input v-model="OrderVo.orderId" placeholder="请输入商品名">
			</el-input>
			</el-form-item>
			<el-form-item>
				<el-button  type="primary" @click="Order">查询</el-button>
		</el-form-item>
		</el-form>
		
		
	   <!--  <el-col :span="8" ><div class=h4>订单编号:</h4>
	 <el-input placeholder="请输入编号"v-model="OrderVo.orderId" clearable>
		</el-input></div>	
		</el-col>
				
	     <el-col :span="1" ><div class="box" >
		  <el-button type="primary" icon="el-icon-search" @click="Order">搜索</el-button>
		 </div>
		 </el-col>
	   </el-row> -->
	   
		<!--查询未订单数据表格-->
		<el-table
		  :data="merChant"
		  style="width: 150%">
		  <el-table-column prop="id" label="订单ID" width="150">
		  </el-table-column>
		    
		    <el-table-column
		      prop="merchantName"
		      label="商户名称"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="orderId"
		      label="订单编号"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="totalAmount"
		      label="订单总金额"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="orderStatus"
		      label="订单状态"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="conveyTag"
		      label="配送状态"
		      width="180">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.conveyTag=='P001-1'">待发货</span>
			  	<span v-if="scope.row.conveyTag=='P001-2'">待提货</span>
			  	<span v-if="scope.row.conveyTag=='P001-3'">待收货</span>
				<span v-if="scope.row.conveyTag=='P001-4'">已收货</span>
			  </template>
		    </el-table-column>
		    <el-table-column
		      prop="payStatus"
		      label="支付方式"
		      width="180">
			  <template slot-scope="scope">
			  	<span v-if="scope.row.payStatus=='K002-1'">等待支付</span>
			  	<span v-if="scope.row.payStatus=='K002-2'">支付失败</span>
			  	<span v-if="scope.row.payStatus=='K002-3'">支付成功</span>
			  </template>
		    </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		  <template slot-scope="scope">
		    <el-button
		      size="mini"
			  type="primary"
			  round
			  icon="el-icon-edit"
		      @click="recheckStorageCell(scope.$index,scope.row)">查看详情</el-button>
		  </template>
		</el-table-column>
		</el-table>
		
		
		
			<!---分页组件-->
			 <el-pagination  style="inline-heigth: 100px; text-align: center; margin: auto;"
			 @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="pageNo"
				  :page-sizes="pageSizeList"
				  :page-size="pageSize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
			 </el-pagination>
			 
			 
			 <!-- 添加对话框 -->
			    <el-dialog title="查看详情订单" :visible.sync="makeFormVisible" >
			    	<el-table :data="productOne" style="width: 100%">
			    	<el-table-column prop="productName" label="商品名称">
			    	</el-table-column>
			    	<el-table-column prop="amount" label="数量">
			    	</el-table-column>
			    	<el-table-column prop="price" label="单价">
			    	</el-table-column>
			    	<el-table-column prop="subtotal" label="小计">
			    </el-table-column>
			    </el-table>
			        </el-dialog>
			    					 
			 
	
</div>
</template>

<script>
			export default {
			data() {
			  return {
				input: '',
				merChant: [],
				//回显商户对象
				productOne:{},
				//当前页号
				pageNo: 1,
				//当前页大小
				pageSize: 5,
				//总记录数
				total: 0,
				//页大小列表
				pageSizeList: [2, 5, 10, 20],
				//查询条件对象
				OrderVo: {
						orderId:'',
						createTime:''
				},
				//添加对话框的显示
				makeFormVisible: false,
				//添加表单的对象
				makeForm: {},
				//lable宽度
				formLabelWidth: '120px',
				
		 pickerOptions: {
		          shortcuts: [{
		            text: '最近一周',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近一个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近三个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              picker.$emit('pick', [start, end]);
		            }
		          }]
		        },
		        
 
		      }
		    },
			methods:{
					  // 页大小改变
					  handleSizeChange(val) {
						  this.pageSize = val
						  this.Order()
					  },
					  
					//页号改变
					handleCurrentChange(val) {
						this.pageNo = val
						// 重新查询
						this.Order()
					},
					//分页查询商品供应信息
					async Order() {
						// 用es6的解构函数
						// console.log(this.productName)
						let cid=sessionStorage.getItem("token")
						const {data: res} = await this.$http.post
						(`/buy/order/check/${this.pageNo}/${this.pageSize}/${cid}`,this.OrderVo)
						console.log(res.list)
						this.merChant = res.list
						this.total = res.total
					},
					async recheckStorageCell(index,row){
						//显示对话框
						this.makeFormVisible = true
						const {data: res} = await this.$http.post(`/buy/orderDetails/orderdetaid/${row.id}`)
						    this.productOne=res
						
					},
		  }
		}
		  
</script>

<style scoped>
	

 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .box{
	 transform: translateY(20px); /* 向下移动20像素 */
	 
  }
  
  .container {
    display: flex;
    justify-content: center;
  }
</style>
